<template>
  <div class="person-page">
    <!-- 个人主页 -->

    <el-card>
      <div class="resume">
        <div class="left">
          <div class="photo">
            <my-photo
              line-height="80px"
              font-size="40px"
              :nojump="true"
              :userName="userData.userName"
              :photo="userData.photo"
            ></my-photo>
          </div>
          <div class="msg">
            <p class="userName">{{userData.userName}}</p>
            <p class="signature">{{userData.signature?userData.signature:'这个人很懒得，什么都没写...'}}</p>
          </div>
          <div class="more">
            <span>
              关注:
              <font>{{mylike}}</font>
            </span>
            <span>
              粉丝:
              <font>{{myfans}}</font>
            </span>
            <span>
              投稿:
              <font>{{tg}}</font>
            </span>
          </div>
        </div>
        <div class="btn">
          <el-button type="danger" v-if="!isFans" @click="fansUser(1)">关注</el-button>
          <el-button type="info" class="my-info" v-else @click="fansUser(0)">取消关注</el-button>
          <el-button type @click="dialogFormVisible=true">私信</el-button>
        </div>
      </div>
    </el-card>

    <!-- 他的投稿 -->
    <div class="tg">
      <el-card>
        <div class="container">
          <div class="title">
            <h3>他的投稿</h3>
          </div>
          <div class="content">
            <video-card v-for="(item,index) in videos" :key="index" :video="item"></video-card>
          </div>
          <div class="pagination">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="totalRow"
              prev-text="上一页"
              next-text="下一页"
              :current-page.sync="pageNumber"
              :page-size="24"
            ></el-pagination>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 发送私信 -->
    <el-dialog title="私信" :visible.sync="dialogFormVisible">
      <div class="tip">对 {{userData.userName}} 说点什么吧</div>
      <el-input type="textarea" placeholder="请输入内容" v-model="content" resize="none" rows="5"></el-input>
      <div class="d-btn" v-loading="loading">
        <el-button type="primary" @click="sendLetter()">发送</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "person-page",
  data: function() {
    return {
      userId: null,
      userData: {
        userName: "",
        photo: ""
      },
      tg: 0,
      mylike: 0,
      myfans: 0,
      content: "",
      dialogFormVisible: false,
      loading: false,
      isFans: false,
      videos: [],
      totalRow: 0,
      pageNumber: 1,
      pageSize: 10
    };
  },
  methods: {
    getUser() {
      this.axios
        .post("user/getUserById", {
          id: this.userId,
          uid: this.$store.state.user.id
        })
        .then(res => {
          this.userData = res.data.userData;
          this.tg = res.data.mytg;
          this.mylike = res.data.mylike;
          this.myfans = res.data.myfans;
          this.isFans = res.data.isFans;
        });
    },
    sendLetter() {
      this.loading = true;
      this.axios
        .post("letter/send", {
          sid: this.$store.state.user.id,
          rid: this.userData.id,
          content: this.content
        })
        .then(res => {
          if (res.data.success) {
            this.loading = false;
            this.$message.success("发送成功");
            this.dialogFormVisible = false;
            this.content = "";
          }
        });
    },
    fansUser(flag) {
      this.axios
        .post("user/fansUser", {
          uid: this.$store.state.user.id,
          rid: this.userId,
          flag: flag
        })
        .then(res => {
          if (res.data.success) {
            this.isFans = flag == 1;
            this.getFansNum();
          }
        });
    },
    //获取粉丝数量
    getFansNum() {
      this.axios
        .post("user/getFansNum", {
          id: this.userId
        })
        .then(res => {
          this.myfans = res.data.myfans;
        });
    },
    getVideos() {
      this.axios
        .post("video/getMyVideo", {
          id: this.userId,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        })
        .then(res => {
          this.videos = res.data.page.list;
          this.totalRow = res.data.page.totalRow;
        });
    }
  },
  mounted: function() {
    this.userId = this.$route.query.id;
    console.log(this.userId);
    this.getUser();
    this.getVideos();
  },
  watch: {
    pageNumber: function() {
      this.getVideos();
    }
  }
};
</script>

<style lang="scss" scoped>
.resume {
  display: flex;
  padding: 0 50px;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    div {
      margin-right: 30px;
    }
    .photo {
      height: 80px;
      width: 80px;
      border-radius: 40px;

      overflow: hidden;
    }
    .msg {
      .userName {
        margin: 0;
        font-size: 18px;
        font-weight: bold;
      }
      .signature {
        font-size: 12px;
        color: #909399;
        width: 180px;
        height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .more {
      span {
        color: #c0c4cc;
        font {
          color: #fa8686;
        }
      }
    }
  }
}
.tg {
  margin: 20px 0 20px 0;
  .container {
    height: 550px;
    .title {
      border-bottom: 1px solid #dcdfe6;
    }
    .content {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      .video-card {
        margin: 0 30px 25px 0px;
        &:nth-child(5n) {
          margin-right: 0;
        }
      }
    }
  }
}
.tip {
  margin-bottom: 20px;
  color: #606266;
}
.d-btn {
  text-align: right;
  margin-top: 30px;
}
/* .my-info{
  background: #f4f4f5;
  color: #909fbe;
} */
</style>